<template>
  <div>
    <el-card class="box-card tac" style="font-size: 18px;;
    color: #909399;font-weight: 700; ">
      <span>{{isadd?'添加区域信息':'修改区域信息'}}</span>
    </el-card>
    <el-card class="box-card tac" style="margin-top:5px; background-color:#fff;">
      <el-form ref="form" :model="form">
        <el-form-item style="margin-top:40px;" v-if="!isadd">
          <span style="font-size:14px;color: #303133; line-height: 40px;margin-right:10px;">城市ID</span>
          <el-input v-model="form.areaId" disabled style="width:300px"></el-input>
        </el-form-item>
        <el-form-item style="margin-top:40px;" v-if="!isadd">
          <span style="font-size:14px;color: #303133; line-height: 40px;margin-right:10px;">区域ID</span>
          <el-input v-model="form.cityId" disabled style="width:300px"></el-input>
        </el-form-item>
        <el-form-item style="margin-top:40px;" v-if="isadd">
          <span style="font-size:14px;color: #303133; line-height: 40px;margin-right:10px;">城市名称</span>
          <el-select v-model="form.region" style="width:300px;" placeholder="请选择城市">
            <el-option
              v-for="(item,index) in list"
              :key="index"
              :label="item.name"
              :value="item.cityId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-top:40px;" v-if="!isadd">
          <span style="font-size:14px;color: #303133; line-height: 40px;margin-right:10px;">城市名称</span>
          <el-input disabled v-model="form.cityName" placeholder="请输入城市名称" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item style="margin-top:40px;">
          <span style="font-size:14px;color: #303133; line-height: 40px;margin-right:10px;">区域名称</span>
          <el-input v-model="form.name" placeholder="请输入区域名称" style="width:300px"></el-input>
        </el-form-item>

        <el-form-item class="tac" style="margin-top:40px;">
          <el-button
            v-loading="loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            type="primary"
            @click="onSubmit"
            style="margin-left:40px;"
          >{{isadd?'确认添加':'确认修改'}}</el-button>
          <el-button type="info" @click="exit" style="margin-left:30px">清空数据</el-button>
          <el-button type="success" style="margin-left:40px;" @click="watch1">查看列表</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        cityName: ""
      },
      list: [],
      index: 0,
      cityName: "",
      loading: false,
      isadd: true,
      type: []
    };
  },
  methods: {
    onSubmit() {
      if (this.isadd) {
        this.loading = true;
        if (this.form.region == false) {
          this.$message({
            showClose: true,
            message: "请选择城市",
            type: "warning"
          });
          setTimeout(() => {
            this.loading = false;
          }, 800);
        } else if (this.form.name == false) {
          this.$message({
            showClose: true,
            message: "请输入区域名称",
            type: "warning"
          });
          setTimeout(() => {
            this.loading = false;
          }, 800);
        } else {
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].cityId.indexOf(this.form.region) !== -1) {
              this.index = i;
            }
          }
          this.cityName = this.list[this.index].name;
          let url = "/area/add";
          let data = {
            cityId: this.form.region,
            cityName: this.cityName,
            name: this.form.name
          };
          this.$axios
            .post(url, data)
            .then(res => {
              if (res.code == 666) {
                this.$message.success("添加区域城市成功");
              } else {
                this.$message.error("区域城市已存在");
              }
            })
            .catch(err => {
              this.$message.error("网络错误");
            });
          this.form.name = "";
          this.form.region = "";
          setTimeout(() => {
            this.loading = false;
          }, 800);
        }
      } else {
        this.loading = true;
        let url = "/area/edit";
        this.$axios
          .post(url, this.form)
          .then(res => {
            let msgObj = this.$message.success("修改城市信息成功");
            this.loading = false;
            setTimeout(() => {
              msgObj.close();
              this.$router.push("/area/list");
            }, 500);
          })
          .catch(err => {
            this.$message.error("操作有误");
            this.loading = false;
          });
      }
    },
    exit() {
      if (this.isadd) {
        this.form.name = "";
        this.form.region = "";
      } else {
        this.form.name = "";
      }
    },
    watch1() {
      this.$router.push("/area/list");
    },
    getList() {
      let url = "/city/getList";
      this.$axios
        .get(url)
        .then(res => {
          this.list = res.cities;
        })
        .catch(error => {
          this.$message.error("没有数据");
        });
    }
  },
  created() {
    console.log(this.$route);

    if (this.$route.path == "/area/edit") {
      this.isadd = false;
      this.form = this.$route.params;
    } else {
      this.isadd = true;
      this.getList();
    }
  }
};
</script>